import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:get/get_state_manager/get_state_manager.dart';
import 'package:share_fit/app/components/back_btn_icon.dart';
import 'package:share_fit/app/components/cupertino_picker_ext.dart';
import 'package:share_fit/app/helper/ext/tr_ext.dart';
import 'package:share_fit/app/tools/color_const.dart';
import 'package:share_fit/generated/locales.g.dart';

import 'logic.dart';

class GoalSettingPage extends StatelessWidget {
  GoalSettingPage({super.key});

  final logic = Get.put(GoalSettingLogic());
  final state = Get.find<GoalSettingLogic>().state;

  @override
  Widget build(BuildContext context) {
    state.sportType = Get.arguments;

    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        leading: BackBtnIcon(onTap: () => logic.goBack()),
        title: Text(
          LocaleKeys.sports_goal_title_text.ts,
          style: TextStyle(color: ColorConst.primaryFontColor),
        ),
        centerTitle: true,
        elevation: 0,
        bottom: TabBar(
          labelPadding: EdgeInsets.zero,
          dividerHeight: 0,
          labelColor: Colors.white,
          tabAlignment: TabAlignment.start,
          //选中的颜色
          labelStyle: TextStyle(color: Colors.white, fontSize: 52.sp),
          unselectedLabelColor: Colors.black54,
          //未选中的颜色
          unselectedLabelStyle: TextStyle(color: Colors.black54, fontSize: 52.sp),
          isScrollable: true,
          //自定义indicator样式
          indicator: BoxDecoration(
            color: const Color.fromRGBO(249, 98, 43, 1),
            borderRadius: BorderRadius.all(Radius.circular(60.r)),
          ),
          controller: logic.tabController,
          tabs: state.tabTitleList
              .map((e) => Container(alignment: Alignment.center, width: 300.w, height: 120.h, child: Text(e, style: TextStyle(fontSize: 48.sp))))
              .toList(),
          onTap: (value) => logic.onTab(value),
        ),
      ),
      // body: _InnerView(logic),
      body: TabBarView(
        controller: logic.tabController,
        children: [
          buildDurationContainer(context),
          buildDistanceContainer(context),
          buildCalorieContainer(context),
        ],
      ),
    );
  }

  buildDurationContainer(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      child: Column(
        children: [
          SizedBox(height: 60.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            textBaseline: TextBaseline.alphabetic,
            children: [
              GetBuilder<GoalSettingLogic>(
                id: logic.selectedDurationText,
                builder: (_) => Text(_.state.selectedDuration, style: TextStyle(fontSize: 82.sp)),
              ),
              // SizedBox(width: 10.w),
              // Baseline(
              //   baseline: 25.0,
              //   baselineType: TextBaseline.alphabetic,
              //   child: Text(LocaleKeys.sports_goal_duration_unit_text.ts, style: TextStyle(fontSize: 52.sp, color: Colors.grey)),
              // ),
            ],
          ),
          SizedBox(height: 60.h),
          GestureDetector(
            child: Container(
              width: 310.w,
              height: 150.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(60.r)),
              ),
              child: Text(LocaleKeys.sports_customize_btn_text.ts),
            ),
            onTap: () => openDurationCustomizeView(context),
          ),
          SizedBox(height: 60.h),
          Container(
            height: 800.h,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(60.r)),
            ),
            child: Row(
              children: [
                SizedBox(width: 40.w),
                Container(
                  alignment: Alignment.center,
                  child: RotatedBox(
                    quarterTurns: 1,
                    child: Image.asset('assets/images/home/triangle.png', color: Colors.red, width: 60.w, height: 60.w),
                  ),
                ),
                SizedBox(width: 60.w),
                Expanded(
                  child: CupertinoPickerExt(
                    items: state.durationList,
                    width: 250,
                    itemHeight: 50,
                    height: 250,
                    // unit: LocaleKeys.time_unit_minute.ts,
                    onChanged: (val) => logic.changeDuration(val),
                  ),
                ),
                SizedBox(width: 140.w),
              ],
            ),
          ),
          SizedBox(height: 60.h),
          GestureDetector(
            onTap: () => logic.startSports(),
            child: Container(
              height: 150.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(249, 98, 43, 1),
                borderRadius: BorderRadius.all(Radius.circular(60.r)),
              ),
              child: Text(LocaleKeys.sports_start_btn_text.ts, style: TextStyle(fontSize: 52.sp, color: Colors.white)),
            ),
          ),
          SizedBox(height: 60.h),
        ],
      ),
    );
  }

  buildDistanceContainer(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      child: Column(
        children: [
          SizedBox(height: 60.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            textBaseline: TextBaseline.alphabetic,
            children: [
              GetBuilder<GoalSettingLogic>(
                id: logic.selectedDistanceText,
                builder: (_) => Text(_.state.selectedDistance, style: TextStyle(fontSize: 82.sp)),
              ),
              SizedBox(width: 10.w),
              Baseline(
                baseline: 25.0,
                baselineType: TextBaseline.alphabetic,
                child: Text(logic.getLengthUnitString(), style: TextStyle(fontSize: 52.sp, color: Colors.grey)),
              ),
            ],
          ),
          SizedBox(height: 60.h),
          GestureDetector(
            child: Container(
              width: 310.w,
              height: 150.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(60.r)),
              ),
              child: Text(LocaleKeys.sports_customize_btn_text.ts),
            ),
            onTap: () => openDistanceCustomizeView(context),
          ),
          SizedBox(height: 60.h),
          Container(
            height: 800.h,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(60.r)),
            ),
            child: Row(
              children: [
                SizedBox(width: 40.w),
                Container(
                  alignment: Alignment.center,
                  child: RotatedBox(
                    quarterTurns: 1,
                    child: Image.asset('assets/images/home/triangle.png', color: Colors.red, width: 60.w, height: 60.w),
                  ),
                ),
                SizedBox(width: 60.w),
                Expanded(
                  child: CupertinoPickerExt(
                    items: state.distanceList,
                    width: 250,
                    itemHeight: 50,
                    height: 250,
                    unit: logic.getLengthUnitString(),
                    onChanged: (val) => logic.changeDistance(val),
                  ),
                ),
                SizedBox(width: 140.w),
              ],
            ),
          ),
          SizedBox(height: 60.h),
          GestureDetector(
            onTap: () => logic.startSports(),
            child: Container(
              height: 150.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(249, 98, 43, 1),
                borderRadius: BorderRadius.all(Radius.circular(60.r)),
              ),
              child: Text(LocaleKeys.sports_start_btn_text.ts, style: TextStyle(fontSize: 52.sp, color: Colors.white)),
            ),
          ),
          SizedBox(height: 60.h),
        ],
      ),
    );
  }

  buildCalorieContainer(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(horizontal: 40.w),
      child: Column(
        children: [
          SizedBox(height: 60.h),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            textBaseline: TextBaseline.alphabetic,
            children: [
              GetBuilder<GoalSettingLogic>(
                id: logic.selectedCalorieText,
                builder: (_) => Text(_.state.selectedCalorie, style: TextStyle(fontSize: 82.sp)),
              ),
              SizedBox(width: 10.w),
              Baseline(
                baseline: 25.0,
                baselineType: TextBaseline.alphabetic,
                child: Text(LocaleKeys.thermal_unit_kcal.ts, style: TextStyle(fontSize: 52.sp, color: Colors.grey)),
              ),
            ],
          ),
          SizedBox(height: 60.h),
          GestureDetector(
            child: Container(
              width: 310.w,
              height: 150.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(Radius.circular(60.r)),
              ),
              child: Text(LocaleKeys.sports_customize_btn_text.ts),
            ),
            onTap: () => openCalorieCustomizeView(context),
          ),
          SizedBox(height: 60.h),
          Container(
            height: 800.h,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(60.r)),
            ),
            child: Row(
              children: [
                SizedBox(width: 40.w),
                Container(
                  alignment: Alignment.center,
                  child: RotatedBox(
                    quarterTurns: 1,
                    child: Image.asset('assets/images/home/triangle.png', color: Colors.red, width: 60.w, height: 60.w),
                  ),
                ),
                SizedBox(width: 60.w),
                Expanded(
                  child: CupertinoPickerExt(
                    items: state.calorieList,
                    width: 250,
                    itemHeight: 50,
                    height: 250,
                    onChanged: (val) => logic.changeCalorie(val),
                  ),
                ),
                SizedBox(width: 140.w),
              ],
            ),
          ),
          SizedBox(height: 60.h),
          GestureDetector(
            onTap: () => logic.startSports(),
            child: Container(
              height: 150.h,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: const Color.fromRGBO(249, 98, 43, 1),
                borderRadius: BorderRadius.all(Radius.circular(60.r)),
              ),
              child: Text(LocaleKeys.sports_start_btn_text.ts, style: TextStyle(fontSize: 52.sp, color: Colors.white)),
            ),
          ),
          SizedBox(height: 60.h),
        ],
      ),
    );
  }

  openDurationCustomizeView(BuildContext context) {
    Get.dialog(
      barrierDismissible: true,
      Center(
        child: Material(
          borderRadius: BorderRadius.all(Radius.circular(60.r)),
          child: Container(
            width: 1000.w,
            height: 600.h,
            padding: EdgeInsets.symmetric(vertical: 20.h, horizontal: 80.w),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(LocaleKeys.sports_goal_duration_customize_text.ts, style: TextStyle(fontSize: 52.sp)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 200.w,
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: TextFormField(
                        maxLines: 1,
                        initialValue: state.inputHours,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                          LengthLimitingTextInputFormatter(2),
                        ],
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15.0),
                            borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                          ),
                          contentPadding: const EdgeInsets.all(10.0),
                        ),
                        onChanged: (value) => logic.durationHourCustomize(value),
                        autofocus: false,
                      ),
                    ),
                    Text(':', style: TextStyle(fontSize: 80.w)),
                    Container(
                      width: 200.w,
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: TextFormField(
                        maxLines: 1,
                        initialValue: state.inputMinutes,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                          LengthLimitingTextInputFormatter(2),
                        ],
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15.0),
                            borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                          ),
                          contentPadding: const EdgeInsets.all(10.0),
                        ),
                        onChanged: (value) => logic.durationMinuteCustomize(value),
                        autofocus: false,
                      ),
                    ),
                    Text(':', style: TextStyle(fontSize: 80.w)),
                    Container(
                      width: 200.w,
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: TextFormField(
                        maxLines: 1,
                        initialValue: state.inputSeconds,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                          LengthLimitingTextInputFormatter(2),
                        ],
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15.0),
                            borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                          ),
                          contentPadding: const EdgeInsets.all(10.0),
                        ),
                        onChanged: (value) => logic.durationSecondCustomize(value),
                        autofocus: true,
                      ),
                    ),
                  ],
                ),
                GetBuilder<GoalSettingLogic>(
                  id: 'canSaveDuration',
                  builder: (ctrl) => Column(
                    children: [
                      Visibility(
                        visible: ctrl.state.showDurationWarning,
                        child: Container(
                          margin: EdgeInsets.only(bottom: 30.h),
                          child: Text(LocaleKeys.sports_goal_setting_warning_text.ts),
                        ),
                      ),
                      IgnorePointer(
                        ignoring: !ctrl.state.canSaveDuration,
                        child: GestureDetector(
                          child: Container(
                            height: 140.h,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: !ctrl.state.canSaveDuration ? ColorConst.activeColor.withOpacity(.7) : ColorConst.activeColor,
                              borderRadius: BorderRadius.circular(60.r),
                            ),
                            child: Text(
                              LocaleKeys.ok.ts,
                              style: TextStyle(
                                color: !ctrl.state.canSaveDuration ? Colors.white.withOpacity(.5) : Colors.white,
                                fontSize: 52.sp,
                              ),
                            ),
                          ),
                          onTap: () => logic.applyCustomize(),
                        ),
                      ),
                    ],
                  ),
                ),
                // Container(
                //   padding: EdgeInsets.symmetric(horizontal: 150.w),
                //   child: TextField(
                //     maxLines: 1,
                //     textAlign: TextAlign.center,
                //     keyboardType: TextInputType.number,
                //     decoration: InputDecoration(
                //       border: OutlineInputBorder(
                //         borderRadius: BorderRadius.circular(15.0),
                //         borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                //       ),
                //       contentPadding: const EdgeInsets.all(10.0),
                //     ),
                //     onChanged: (value) => logic.durationCustomize(value),
                //     autofocus: true,
                //   ),
                // ),
                // Text(LocaleKeys.sports_goal_duration_customize_tip_text.ts, style: TextStyle(fontSize: 32.sp)),
                // Row(
                //   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                //   children: [
                //     GestureDetector(
                //       child: Text(LocaleKeys.cancel.ts, style: TextStyle(color: ColorConst.activeColor, fontSize: 52.sp)),
                //       onTap: () => Get.back(),
                //     ),
                //     SizedBox(width: 10.w),
                //     GetBuilder<GoalSettingLogic>(
                //       id: 'canSaveDuration',
                //       builder: (ctrl) => IgnorePointer(
                //         ignoring: !ctrl.state.canSaveDuration,
                //         child: GestureDetector(
                //           child: Text(
                //             LocaleKeys.ok.ts,
                //             style: TextStyle(
                //               color: ctrl.state.canSaveDuration ? ColorConst.activeColor : Colors.grey.withOpacity(.5),
                //               fontSize: 52.sp,
                //             ),
                //           ),
                //           onTap: () => logic.applyCustomize(),
                //         ),
                //       ),
                //     ),
                //   ],
                // ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  openCalorieCustomizeView(BuildContext context) {
    Get.dialog(
      barrierDismissible: true,
      Center(
        child: Material(
          borderRadius: BorderRadius.all(Radius.circular(60.r)),
          child: Container(
            width: 1000.w,
            height: 600.h,
            padding: EdgeInsets.symmetric(vertical: 20.h, horizontal: 80.w),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(LocaleKeys.sports_goal_calories_customize_text.ts, style: TextStyle(fontSize: 52.sp)),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 150.w),
                  child: TextField(
                    maxLines: 1,
                    textAlign: TextAlign.center,
                    keyboardType: TextInputType.number,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(15.0),
                        borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                      ),
                      contentPadding: const EdgeInsets.all(10.0),
                    ),
                    onChanged: (value) => logic.calorieCustomize(value),
                    autofocus: true,
                  ),
                ),
                Text(LocaleKeys.sports_goal_calories_customize_tip_text.ts, style: TextStyle(fontSize: 32.sp)),
                GetBuilder<GoalSettingLogic>(
                  id: 'canSaveCalories',
                  builder: (ctrl) => IgnorePointer(
                    ignoring: !state.canSaveCalories,
                    child: GestureDetector(
                      child: Container(
                        height: 140.h,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          color: !ctrl.state.canSaveCalories ? ColorConst.activeColor.withOpacity(.7) : ColorConst.activeColor,
                          borderRadius: BorderRadius.circular(60.r),
                        ),
                        child: Text(
                          LocaleKeys.ok.ts,
                          style: TextStyle(color: ctrl.state.canSaveCalories ? Colors.white : Colors.white.withOpacity(.5), fontSize: 52.sp),
                        ),
                      ),
                      onTap: () => logic.applyCustomize(),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  openDistanceCustomizeView(BuildContext context) {
    Get.dialog(
      barrierDismissible: true,
      Center(
        child: Material(
          borderRadius: BorderRadius.all(Radius.circular(60.r)),
          child: Container(
            width: 1000.w,
            height: 600.h,
            padding: EdgeInsets.symmetric(vertical: 20.h, horizontal: 80.w),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                Text(LocaleKeys.sports_goal_distance_customize_text.ts, style: TextStyle(fontSize: 52.sp)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 200.w,
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: TextFormField(
                        maxLines: 1,
                        initialValue: state.distancePartOne,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                          LengthLimitingTextInputFormatter(2),
                        ],
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15.0),
                            borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                          ),
                          contentPadding: const EdgeInsets.all(10.0),
                        ),
                        onChanged: (value) => logic.distancePartOneCustomize(value),
                        autofocus: true,
                      ),
                    ),
                    Text('.', style: TextStyle(fontSize: 80.w)),
                    Container(
                      width: 200.w,
                      padding: EdgeInsets.symmetric(horizontal: 10.w),
                      child: TextFormField(
                        maxLines: 1,
                        initialValue: state.distancePartTwo,
                        textAlign: TextAlign.center,
                        keyboardType: TextInputType.number,
                        inputFormatters: [
                          FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
                          LengthLimitingTextInputFormatter(1),
                        ],
                        decoration: InputDecoration(
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(15.0),
                            borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                          ),
                          contentPadding: const EdgeInsets.all(10.0),
                        ),
                        onChanged: (value) => logic.distancePartTwoCustomize(value),
                        autofocus: false,
                      ),
                    ),
                  ],
                ),
                GetBuilder<GoalSettingLogic>(
                  id: 'canSaveDistance',
                  builder: (ctrl) => Column(
                    children: [
                      Visibility(
                        visible: ctrl.state.showDurationWarning,
                        child: Container(
                          margin: EdgeInsets.only(bottom: 30.h),
                          child: Text(LocaleKeys.sports_goal_setting_warning_text.ts),
                        ),
                      ),
                      IgnorePointer(
                        ignoring: !ctrl.state.canSaveDistance,
                        child: GestureDetector(
                          child: Container(
                            height: 140.h,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: !ctrl.state.canSaveDistance ? ColorConst.activeColor.withOpacity(.7) : ColorConst.activeColor,
                              borderRadius: BorderRadius.circular(60.r),
                            ),
                            child: Text(
                              LocaleKeys.ok.ts,
                              style: TextStyle(
                                color: !ctrl.state.canSaveDistance ? Colors.white.withOpacity(.5) : Colors.white,
                                fontSize: 52.sp,
                              ),
                            ),
                          ),
                          onTap: () => logic.applyCustomize(),
                        ),
                      ),
                    ],
                  ),
                ),

                // Container(
                //   padding: EdgeInsets.symmetric(horizontal: 150.w),
                //   child: TextField(
                //     maxLines: 1,
                //     textAlign: TextAlign.center,
                //     keyboardType: const TextInputType.numberWithOptions(decimal: true),
                //     decoration: InputDecoration(
                //       border: OutlineInputBorder(
                //         borderRadius: BorderRadius.circular(15.0),
                //         borderSide: const BorderSide(color: Colors.red, width: 3.0, style: BorderStyle.solid),
                //       ),
                //       contentPadding: const EdgeInsets.all(10.0),
                //     ),
                //     onChanged: (value) => logic.distanceCustomize(value),
                //     autofocus: true,
                //   ),
                // ),
                // Text('${LocaleKeys.sports_goal_distance_customize_tip_text.ts}${LocaleKeys.length_unit_km.ts}', style: TextStyle(fontSize: 32.sp)),
                // Row(
                //   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                //   children: [
                //     GestureDetector(
                //       child: Text(LocaleKeys.cancel.ts, style: TextStyle(color: ColorConst.activeColor, fontSize: 52.sp)),
                //       onTap: () => Get.back(),
                //     ),
                //     SizedBox(width: 10.w),
                //     GetBuilder<GoalSettingLogic>(
                //       id: 'canSaveDistance',
                //       builder: (_) => IgnorePointer(
                //         ignoring: !state.canSaveDistance,
                //         child: GestureDetector(
                //           child: Text(LocaleKeys.ok.ts,
                //               style:
                //                   TextStyle(color: _.state.canSaveDistance ? ColorConst.activeColor : Colors.grey.withOpacity(.5), fontSize: 52.sp)),
                //           onTap: () => logic.applyCustomize(),
                //         ),
                //       ),
                //     ),
                //   ],
                // ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
